<template>
  <header class="list-content-header">
    <list-title :title="list && list.name"></list-title>
    <div class="list-desc">
      <div class="list-pic">
        <img :src="pic" />
        <div>
          <span class="icon-耳机"></span>
          <span v-if="list && list.playCount > 100000">
            {{ Math.floor(list && list.playCount / 10000) }}万
          </span>
          <span v-else>
            {{ list && list.playCount }}
          </span>
        </div>
      </div>
      <div class="list-msg">
        <h3>{{ list && list.name }}</h3>
        <div>
          <img :src="creator && creator.avatarUrl" />
          <span @click="goUser(creator && creator.userId)">{{ creator && creator.nickname }} ></span>
        </div>
      </div>
    </div>
    <div class="listData">
      <div>
        <div>
          <span class="icon-collection"></span>
        </div>
        {{ list && list.subscribedCount }}
      </div>
      <div @click="goComment(list && list.id)">
        <div>
          <span class="icon-comment"></span>
        </div>
        {{ list && list.commentCount }}
      </div>
      <div>
        <div>
          <span class="icon-share"></span>
        </div>
        {{ list && list.shareCount }}
      </div>
      <div>
        <div>
          <span class="icon-download"></span>
        </div>
        下载
      </div>
    </div>
  </header>
</template>

<script lang="ts">
import { CommentHeader } from "@/model/common-header.model";
import { CommentType, CommonIdType } from "@/model/id-or-enum.model";
import { SongListInfo, UserInfo } from "@/model/music-info.model";
import { Vue, Component, Prop } from "vue-property-decorator";
import Router from "vue-router";
import { namespace } from "vuex-class";
import listTitle from "./listTitle.vue";
const AppModule = namespace("app");
@Component({
  components: {
    listTitle,
  },
})
export default class ListHeaderComponent extends Vue {
  @Prop({ required: true })
  public list: SongListInfo;
  @Prop()
  public creator: UserInfo;

  get pic() {
    return this.list.coverImgUrl || this.list.picUrl;
  }

  @AppModule.Mutation("setCommentType")
  public setCommentType: (id: CommentType) => void;
  @AppModule.Mutation("setCommentHeader")
  public setCommentHeader: (header: CommentHeader) => void;

  $router: Router;

  goComment(id: CommonIdType) {
    let header: CommentHeader = {
      name: this.list?.name,
      artists: [this.creator as any],
      musicpic: this.list?.coverImgUrl,
    };
    this.setCommentType(CommentType.ToList);
    this.setCommentHeader(header);
    this.$router.push({ name: "comment", params: { id: id?.toString() } }).catch((err) => err);
  }
  goUser(id: CommonIdType) {
    // console.log(id)
    this.$router.push({ path: `/userHome/${id}` }).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped>
.list-content-wrap {
  font-size: 0.15rem;
}
.list-content-header {
  background-color: #df2d2d;
  color: #fff;
}
.listData {
  display: flex;
  height: 1rem;
  align-items: center;
}
.listData > div {
  flex: 1;
  text-align: center;
  cursor: pointer;
}
.icon {
  width: 0.2rem;
  height: 0.2rem;
}
.icon-up {
  height: 0.12rem;
  width: 0.12rem;
}
.list-content-index {
  text-align: center;
}
.list-content-up {
  font-size: 0.12rem;
  text-align: center;
}
.list-content-music {
  display: flex;
}
.list-content-left {
  width: 0.5rem;
  padding: 0.1rem;
  color: #475669;
}
.list-content-right {
  flex: 1;
  margin-right: 0.2rem;
  border-bottom: 1px solid #475669;
  padding: 0.1rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-content-right-artists {
  width: 100%;
  font-size: 0.12rem;
  color: #475669;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-desc {
  display: flex;
  .list-pic {
    width: 40%;
    margin: 0.2rem;
    position: relative;
    > img {
      width: 100%;
    }
    > div {
      position: absolute;
      top: 0;
      right: 0.1rem;
    }
  }
  .list-msg {
    flex: 1;
    margin-top: 0.2rem;
    > h3 {
      font-size: 0.25rem;
      margin-bottom: 0.1rem;
    }
    img {
      width: 0.5rem;
      border-radius: 50%;
    }
  }
}
</style>
